/* 编辑地点 */
var Tool = require("../common/tool.js");
var Map = require("./map.js");
var EditPlace = React.createClass({
    images:[],
    getInitialState:function(){
        return {
            addr:{
                picture:[]
            },

        }
    },
    componentDidMount: function(){
        var self = this;
        // 通过<a href="#/place/:id/edit"></a>传参过来的
        var _id = this.props.params.id; 
        var _url = '/place/' + _id;
        Tool.get(_url).then(function(data){
            self.setState({
                addr:data.location,
            })
        });
    },
    changeHander:function(name){
        var self = this;
        return function(event){
            var _tmp = self.state.addr;
            _tmp[name] = event.target.value;
            self.setState({
                addr:_tmp
            })
        }
    },
    changeImg:function(event){
        var _imgFiles = event.target.files;
        if(!_imgFiles.length) return;

        var that = this;
        var URL = window.URL || window.webkitURL;
        that.images = [];
        for(var i=0; i<3; i++){
            if(!_imgFiles[i]){
                var _tmp = this.state.addr;
                _tmp.picture[i] = "";
                this.setState({
                    addr:_tmp
                })
                continue;
            }
            var _tmp = this.state.addr;
            _tmp.picture[i] = URL.createObjectURL(_imgFiles[i]);
            this.setState({
                addr:_tmp
            })
            that.images.push(_imgFiles[i]);

        }

        
    },
    save:function(){
        var postAction=[
            Tool.putJSON('/place', this.state.addr)
        ];
        if(this.images.length){
            var _formDate = new FormData();
            for(var i=0; i<this.images.length; i++){
                _formDate.append("pic"+i, this.images[i]);
            }
            postAction.push(Tool.postForm('/place/picture/'+this.state.addr.id, _formDate));
        }
        // Tool.putJSON('/place', this.state.addr).then(function(){
        //     alert("保存成功");
        //     location.href="#/place";
        // })
        Promise.all(postAction).then(function(){
            alert("保存地点成功");
            location.href="#/place";
        },function(){
            alert("保存地点失败")
        })
    },
    quit:function(){
        location.href="#/place";
    },
    select:function(){
        this.refs.choseImg.click();
    },
    render:function(){
        return (
            <div>
                <div className="m-edit">
                    <p>编辑地点</p>
                    <img className="item-img" src={this.state.addr.picture&&this.state.addr.picture[0]} />
                    <img className="item-img" src={this.state.addr.picture&&this.state.addr.picture[1]} />
                    <img className="item-img" src={this.state.addr.picture&&this.state.addr.picture[2]} /><br/>
                    <input type="text" value={this.state.addr.name} onChange={this.changeHander("name")}/><br/>
                    <input type="text" value={this.state.addr.description} onChange={this.changeHander("description")}/><br/>
                    <select name="typeId" value={this.state.addr.typeId} onChange={this.changeHander('typeId')}>
                        <option value="2">运动健身</option>
                        <option value="3">人气美食</option>
                        <option value="4">休闲娱乐</option>
                        <option value="5">文化艺术</option>
                        <option value="6">风景名胜</option>
                        <option value="7">时尚购物</option>
                    </select>
                    <span>{this.state.addr.address}</span>
                    <button onClick={this.save}>保存</button>
                    <button onClick={this.quit}>取消</button>
                    <input ref="choseImg" type="file" accept="image/*" className="f-dn" multiple onChange={this.changeImg}/>
                    <button onClick={this.select.bind(null)}>更换图片</button>
                </div>
                <Map markPlace={this.state.addr}/>
            </div>
        )
    }
}); 
module.exports = EditPlace;